<template>
    <div>
        <table>
            <tbody>
                <tr>
                    <th>账号</th>
                    <th><input type="text" v-model="people.uname"></th>
                </tr>
                <tr>
                    <th>密码</th>
                    <th><input type="password" v-model="people.upwd"></th>
                </tr>
                <tr>
                    <th>性别</th>
                    <th>
                        <input type="radio" name="sex" value="男" v-model="people.sex">男
                        <input type="radio" name="sex" value="女" v-model="people.sex">女
                    </th>
                </tr>
                <tr>
                    <th>爱好</th>
                    <th>
                        <input type="checkbox" name="like" value="coding" v-model="people.like">coding
                        <input type="checkbox" name="like" value="金融" v-model="people.like">金融
                        <input type="checkbox" name="like" value="法律">法律
                        <input type="checkbox" name="like" value="写作">写作
                        <input type="checkbox" name="like" value="主持">主持
                    </th>
                </tr>
                <tr>
                    <th>籍贯</th>
                    <th>
                        <select  v-model="people.address">
                            <option value="">请选择</option>
                            <option :value="item.name" v-for="item in address"key='item.id'>{{ item.name }}</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th>出生日期</th>
                    <th><input type="date" v-model="people.birthday"></th>
                </tr>
                <tr>
                    <th>个人头像</th>
                    <th><input type="file"></th>
                </tr>
                <tr>
                    <th>简介</th>
                    <th>
                        <textarea v-model="people.desc"></textarea>
                    </th>
                </tr>
                <tr>
                    <th></th>
                    <th>
                        <input type="button" value="获取People值" @click="getvalue">
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive} from 'vue';
let people =reactive({
    uname:'',
    upwd:'',
    sex:'男',
    like:[],
    address:'',
    birthday:'',
    photo:'',
    desc:'',
});
let address =ref([
    {id:1,name:'西宁'},
    {id:2,name:'南京'},
    {id:3,name:'成都'},
    {id:4,name:'重庆'},
    {id:5,name:'北京'},
])
const getvalue=()=>{
    console.log(people);
}
</script>

<style scoped>

</style>